<%--
  Created by IntelliJ IDEA.
  User: 29688
  Date: 2021/3/22
  Time: 19:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layui-v2.5.7/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/list.css" media="all">
    <link rel="stylesheet" href="../../../css/template.css" media="all">
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
</head>

<body>
<div class="layui-container" style="margin: 20px 0;">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-col-md6">
                <div class="layui-input-block">
                    <label>
                        <input type="text" id="searchName" placeholder="请输入要搜索的书籍" class="layui-input">
                    </label>
                </div>
            </div>
            <div class="layui-col-md3">
                <input type="button" class="layui-btn" value="搜索" onclick="changeList()">
            </div>
            <div class="layui-col-md3">
                <input type="button" class="layui-btn" value="猜你喜欢" onclick="changeLikeList()">
            </div>
            <div class="layui-col-md12">
                <div class="layui-form-item">
                    <div class="layui-input-block" id="typeList">
                        <%--书籍类型部分--%>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="layui-fluid layadmin-cmdlist-fluid">
    <div class="layui-row layui-col-space30" id="main">
        <%--书籍列表部分--%>
    </div>
</div>
<div class="layui-col-md12 layui-col-sm12">
    <%--分页部分--%>
    <div id="demo0"></div>
</div>


<script src="../../../layui-v2.5.7/layui/layui.js"></script>
<script>
    /*书籍类型列表渲染*/
    var list=${list}
    go();
    gg();
    function go() {
        var type =${type};
        if (type != null) {
            console.log("good")
            console.log(type)
            console.log(type.length)
            console.log(type[1].tid)
            var html = '<input type="checkbox" checked value="0" title="无类型" >';
            for (let i = 0; i < type.length; i++) {
                html += '<input type="checkbox" checked value= "' + type[i].tid + '" title="' + type[i].tname + '">'
            }
            console.log(html)
            $("#typeList").html(html)
        }

    }
    function gg(){
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'demo0', //注意，这里的 dem0 是 ID，不用加 # 号
                count: list.length, //数据总数，从服务端得到
                limit: 12,//一页显示12
                jump: function (obj) {
                    //模拟渲染
                    var html = "";
                    for (let i = obj.curr * obj.limit - obj.limit; i < obj.curr * obj.limit; i++) {
                        if (typeof(list[i]) == "undefined") {
                            break;
                        } else {
                            html += ' <div class="layui-col-md2 layui-col-sm4">\
                                    <div class="cmdlist-container">\
                                        <a href="/book/bookDetail?bid='+list[i].bid+' ">\
                                            <img src="'+list[i].url+'">\
                                            <div class="cmdlist-text">\
                                                <p class="info">' + list[i].bname + '</p>\
                                                    <b style="color: orangered">￥' + list[i].price + '</b>\
                                                    <b style="font:italic normal 10px;color: #666666">数量：' + list[i].count + '</b>\
                                            </div>\
                                        </a>\
                                    </div>\
                             </div>'
                        }
                        $("#main").html(html)
                    }

                }
            });
        });
    }

    /*交互刷新函数*/
    function changeList() {
        console.log("页面发生变化")
        var bookTypes = []
        /*获取所复选框*/
        $('#typeList input[type=checkbox]:checked').each(function () {
            bookTypes.push(parseInt($(this).val()))
        })
        var searchName = $("#searchName").val();
        postData = {'bookTypes': bookTypes, 'searchName': searchName}
        console.log("打印bookType")
        console.log(bookTypes)
        $.ajax({
            url: '/book/list',
            type: "POST",
            data: postData,
            dataType: 'json',
            traditional: true,
            /*防止深度序列化*/
            success: function (data) {
                console.log(data)
                list=data
                if(data.length===0){
                    layer.msg("很抱歉，没找到相关旧物！")
                }
                else{
                    gg();
                }

            }
        })
    }
    /*交互刷新函数*/
    function changeLikeList() {
        layui.use('layer', function () {
            var layer = layui.layer;
            $.ajax({
                url: '/book/likeList',
                dataType: 'json',
                traditional: true,
                /*防止深度序列化*/
                success: function (data) {
                    console.log(data)
                    if(data.length===0){
                        layer.msg("专业信息未完善或无匹配项!")
                    }
                    else {
                        list=data
                        gg();
                    }

                }
            })
        });


    }
    layui.use('form', function () {
        var form = layui.form;
    });
</script>
</body>
</html>
